<!DOCTYPE html>
<html lang="zh - CN">
  <head>
    <meta charset="UTF - 8" />
    <meta
      name="viewport"
      content="width=device - width, initial - scale = 1.0"
    />
    <title>水印与文字选择</title>
    <style>
      /* 水印样式 */
      #watermark {
          position: fixed;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          z-index: 999;
          /* pointer-events: none; */
          /* 未设置pointer - events: none，鼠标事件可穿透 */
      }

      /* 页面内容样式 */
      #content {
          padding: 20px;
      }
    </style>
  </head>

  <body>
    <div id="watermark">
      <!-- 水印内容，这里简单用一个背景颜色示意 -->
      <div
        style="background-color: rgba(0, 0, 0, 0.1); transform: rotate(-20deg);"
      >
        水印
      </div>
    </div>
    <div id="content">
      <p>这是一段可以选中的文字。鼠标操作可以穿透水印层来选中这段文字。</p>
    </div>
  </body>
</html>
